<template>
	<view class="content">
		<image v-if="!isLogin" src="../../static/my.png" mode="" class="headicon"></image>
		<image v-else class="headicon" src="/static/shuijiao.jpg"></image>
		<view class="text-area">
			<button v-if="!isLogin" type="primary" @click="toLoginPage">用户登录</button>
			<text v-else class="title">{{userinfo.name}}</text>
		</view>
		<view style="margin: 20rpx; width: 100%;">
			<view class="entry">个人信息</view>
			<view class="entry">订单列表</view>
			<view class="entry">修改密码</view>
			<view class="entry">意见反馈</view>
		</view>
		<button type="primary" :disabled="!isLogin" size="default" @click="logout" style="width: 100%;">退出</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false, //记录用户登录状态false表示没有登录，true表示登录
				//保存当前页面的用户信息
				userinfo: {
					 "id": 1,
					    "name": "张三",
					    "password": "123",
					    "email": "zs@163.com",
					    "telephone": "15116785432",
					    "department": "信息工程学院",
					    "major": "移动应用开发"

				}
			}
		},
		onLoad() {

		},
		onShow() {
			this.isLogin = uni.getStorageSync("isLogin")
			this.userinfo = uni.getStorageSync("userinfo")
		},
		methods: {
			logout() {
				this.isLogin = false
				uni.setStorageSync("isLogin", false)
				uni.removeStorageSync('userinfo')
			},

			//定义方法，跳转到登录页面
			toLoginPage() {
				uni.navigateTo({
					url: '/pages/my/login',
					success: res => {},
					fail: () => {},
					complete: () => {}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}

	.headicon {
		height: 200rpx;
		width: 200rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 50%;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.entry {
		width: 100%;
		text-align: left;
		height: 3em;
		line-height: 3em;
		text-indent: 1em;
		border-top: #CCC solid 1rpx;
	}

	.entry:last-of-type {
		border-bottom: #CCC solid 1rpx;
	}

	.entry::after {
		content: '';
		background-image: url('../../static/more.png');
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		margin-top: 0.5em;
		background-size: contain;
		right: 50rpx;
	}
</style>
